<template>
  <div class="icons">
    <swiper :options="swiperOption" v-if="iconList.length">
      <swiper-slide :key="index" v-for="(page,index) of pages">
        <div :key="icon.id" class="icon" v-for="icon of page">
          <div class="icon-img">
            <img :src="icon.imgUrl" class="icon-img-content">
          </div>
          <p class="icon-desc">{{icon.desc}}</p>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'HomeIcons',
    props: {
      iconList: Array
    },
    data () {
      return {
        swiperOption: {
          pagination: '.swiper-pagination',
          autoplay: false,
          // 循环轮播
          loop: true
        },
      }
    },
    computed: {
      pages () {
        let pages = []
        this.iconList.forEach((icon, iconIndex) => {
          let pageIndex = Math.floor(iconIndex / 8)
          if (!pages[pageIndex]) {
            pages.push([])
          }
          pages[pageIndex].push(icon)
        })
        return pages
      }
    }
  }
</script>
<!-- 后面的scoped是必须的，表示它只对当前组件有效，不会影响到其他组件的样式 -->
<style lang="stylus" scoped>
  @import "../../../assets/styles/variables.styl"

  .icons >>> .swiper-container
    height: 54vw

  .icons >>> .swiper-pagination-bullet-active
    background: rgba(0, 175, 190, .8) !important

  .icons >>> .swiper-pagination-bullets
    bottom: 0

  .icons
    margin-top: 0.4rem
    margin-bottom: .1rem

    .icon
      position: relative
      float: left
      width: 25%
      height: 25vw
      overflow: hidden

      .icon-img
        position: absolute
        top: 0
        left: 0
        right: 0
        bottom: .44rem
        // 好像没有用
        box-sizing: border-box
        padding: .1rem

        .icon-img-content
          display: block
          margin: 0 auto
          height: 100%

      .icon-desc
        position: absolute
        left: 0
        right: 0
        bottom: 0
        display: block
        margin: 0 auto
        line-height: .44rem
        text-align: center
        color: #333
        ellipsis()

</style>
